<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>


<!doctype HTML>
<html>

<head>
<title>checkout</title>
<style>@IMPORT url("/static/base.css");
</style>
</head>




<body>
	<%@ include file="/WEB-INF/jsp/page.header.jsp" %>


	<h1>checkout</h1>
	
	<div>
		<a href='javascript:history.back()'>back</a>
	</div>
	
	<div>
	here is your shopping cart
	</div>
	
	<p/>
	<table class='grid'>
	<tr>
	<td>Product</td>
	<td>Unit Price</td>
	<td>Amt</td>
	<td>Total </td>
	</tr>
		<c:forEach items='${cart.items}' var='item'>
			<tr>
				<td>${fn:escapeXml(item.product.name)} (${item.product.key.id})</td>
				<td><fmt:formatNumber type="number" pattern="$###,###.00"
						value="${item.product.price}" /></td>
				<td>x ${item.amount}</td>
				<td><fmt:formatNumber type="number" pattern="$###,###.00"
						value="${item.price}" /></td>


			</tr>
		</c:forEach>
	</table>
	
	<div>
	total: 
	<fmt:formatNumber type="number" pattern="$###,###.00"
						value="${cart.totalPrice}" />
	</div>
	
	<div>
	<button style='padding:0.5em;' onclick='pay(this)'>Make Payment</button>
	</div>
	<script src='/js/jquery-1.7.2.min.js'></script>
	<script>
	function pay (obj) {
		
		if (!confirm("I am ready to pay the items shown above")) {
			return;
		}
		
		$(obj).css('display', 'none');
		
		$.ajax({
			url:"/service/payment.create",
			type : 'post', 
			dataType : 'text', 
			complete : function (response) {
				alert(response.responseText);
				
				location.href='/';
			}
		});
	}
	</script>
</body>
</html>
